<template>
  <s-layout title="我的订单" tabbar="/pages/index/cart">
    <view class="cart-header">
			<uni-search-bar
			  class="cart-search"
			  radius="40"
			  placeholder="请输入查询单号、手机号"
			  cancelButton="none"
				bgColor="#f5f5f5"
		
			  @confirm="onSearch($event.value)"
			/>
			<view class="tabs">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#0396ff" @clickItem="onClickItem" />
			</view>
		</view>
		<view class="cart-content">
			<view class="tip-box">
				超重部分需要补缴运费，请知晓，谢谢！
			</view>
			<view class="cart-list">
				<view v-for="item in list" :key="item.id" class="card cart-box">
					<view class="head-box">
						<view class="brand">
							{{ item.kuaidigs }}
						</view>
						<view class="order">
							运单号：<text class="number">{{ item.jijiancg }}</text>
						</view>
						<view @tap="onCopy(item.jijiancg)" class="copy">
							复制
						</view>
					</view>
					<view class="info-box">
						<view class="sending">
							<view class="from-to">
								<view class="area">
									{{ item.facity }}
								</view>
								<view class="name">
									{{ item.fuser }}
								</view>
							</view>
							<view class="status">
								<view class="text">
									{{ items[item.status] }}
								</view>
								<image class="right" src="/static/index/right.png"></image>
							</view>
							<view class="from-to">
								<view class="area">
									{{ item.shoucity }}
								</view>
								<view class="name">
									{{ item.suser }}
								</view>
							</view>
						</view>
						<view class="list">
							
							<view class="list-item">
								系统单号：{{ item.order_sn }} <text @tap="onCopy(item.order_sn)">复制</text>
							</view>
							<view class="list-item">
								下单时间：{{ item.create_time_text }}
							</view>
							<view class="list-item" v-if="item.kuaidir">
								快递员姓名：{{item.courierName}}，电话：{{item.courierPhone}} <text @click="callphone(item.courierPhone)" class="cicon-phone-call"></text>
							</view>  
						</view>
					</view>
					<view class="foot-box">
						<view class="button" v-show="item.status == 1" @tap="onCancel(item.order_sn)">
							取消订单
						</view>
						<view class="button bg-blue" @tap="sheep.$router.go('/pages/order/detail', { id: item.id })">
							查看详情
						</view>
						<view class="button" v-show="item.status == 99" @tap="onDelete(item.order_sn)">
							删除订单
						</view>
					</view>
				</view>
			</view>
		</view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, reactive, ref, unref } from 'vue';
  import { onShow } from '@dcloudio/uni-app';

  const sys_navBar = sheep.$platform.navbar;
  const cart = sheep.$store('cart');
	
	const current = ref(0)
	const items = ['全部', '待取件', '运输中', '已完成', '已取消']
	
	const list = ref([])

	let keyword = ''
  const onSearch = async (value = '') => {
		keyword = value
		let status = 'all'
		 if (current.value > 0) {
			status = current.value
		}
		const { data } = await sheep.$api.order.list({
			status: status,
			remark: keyword
		})
		list.value = data.data
	}
	
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
			onSearch(keyword)
		}
	}
	
	// 复制

	
	// 取消订单
	async function onCancel(orderId) {
	  uni.showModal({
	    title: '提示',
	    content: '确定要取消订单吗?',
	    success: async function (res) {
	      if (res.confirm) {
	        const { code } = await sheep.$api.order.cancel(orderId);
	        if (code === 1) {
						uni.showToast({
						  title: '取消成功',
						});
						onSearch()
					}
	      }
	    },
	  });
	}
	
	// 删除订单
	function onDelete(orderId) {
	  uni.showModal({
	    title: '提示',
	    content: '确定要删除订单吗?',
	    success: async function (res) {
	      if (res.confirm) {
	        const { code, data } = await sheep.$api.order.delete(orderId);
	        if (code === 1) {
	          uni.showToast({
	            title: '删除成功',
	          });
						onSearch()
	        }
	      }
	    },
	  });
	}
	
	
	function callphone(e){
		uni.makePhoneCall({
			phoneNumber: e //仅为示例
		});
	}
	
	
	// 复制
	const onCopy = (text) => {
	  sheep.$helper.copyText(text);
	};
	
	onShow(() => {
		onSearch()
	});
</script>

<style lang="scss" scoped>
  .cart-header {
		background-color: #fff;
		padding: 30rpx 20rpx 4rpx;
		.cart-search {
			margin-bottom: 20rpx;
			:deep(.uni-searchbar__box) {
				height: 80rpx;
			}
		}
	}
	.cart-content {
		padding: 20rpx;
		.tip-box {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 20rpx;
			background-color: #fef5e4;
			border: 2rpx solid #ece6ae;
			color: #dfab6e;
			text-align: center;
			font-size: 24rpx;
		}
	}
	.cart-box {
		margin-top: 20rpx;
		.head-box {
			display: flex;
			align-items: center;
			padding: 20rpx;
			font-size: 30rpx;
			column-gap: 20rpx;
			border-bottom: 2rpx solid #eeeeee;
			.brand {
				width: 120rpx;
				height: 68rpx;
				line-height: 68rpx;
				border-radius: 34rpx;
				background-color: #ea883f;
				text-align: center;
				color: #fff;
			}
			.order {
				color: #2c2c2c;
				.number {
					color: #ff6600;
				}
			}
			.copy {
				color: #999999;
				font-size: 24rpx;
			}
		}
		.info-box {
			display: flex;
			flex-direction: column;
			row-gap: 40rpx;
			padding: 10rpx 30rpx;
			border-bottom: 2rpx solid #eeeeee;
			.sending {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 20rpx;
				.from-to {
					display: flex;
					flex-direction: column;
					align-items: center;
					row-gap: 12rpx;
					.area {
						font-size: 36rpx;
						color: #2c2c2c;
						font-weight: 600;
					}
					.name {
						color: #999999;
					}
				}
				.status {
					display: flex;
					flex-direction: column;
					align-items: center;
					.text {
						color: #0396ff;
						font-size: 32rpx;
					}
					.right {
						width: 120rpx;
						height: 80rpx;
					}
				}
			}
			.list {
				&-item {
					padding: 10rpx 0;
					color: #999999;
				}
			}
		}
		.foot-box {
			display: flex;
			justify-content: flex-end;
			column-gap: 20rpx;
			padding: 20rpx;
			.button {
				width: 180rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				color: #000000;
				background-color: #f5f5f5;
				font-size: 30rpx;
				border-radius: 34rpx;
				&.bg-blue {
					background-color: #0396ff;
					color: #fff;
				}
			}
		}
	}
</style>
